<template>
  <div class="contract-item">
    <!--<house-list :houseInfo="contractItem.housePerson"></house-list>-->
    <dl>
      <dt>{{ contractItem.webUser && contractItem.webUser.trueName }}的租房合同<span class="type"></span><span class="status">{{ status2Text(contractItem.status) }}</span></dt>
      <dd>签订日期：{{ contractItem.beginTime }}</dd>
      <dd>合同类型：{{ contractItem.type }}</dd>
      <dd>签订期限：{{ month2year(contractItem.diffMonth) }}</dd>
    </dl>
    <slot name="btnGroup"></slot>
  </div>
</template>
<script>
  import houseList from '@/components/houseList'
  export default {
    props: ['contractItem'],
    data () {
      return {
      }
    },
    components: {
      houseList
    },
    methods: {
      status2Text (status) {
        let statusTxt = ''
        switch (status) {
          case 1: statusTxt = '签约中'; break
          case 2: statusTxt = '已签约'; break
          case 3: statusTxt = '已废除'; break
          case 4: statusTxt = '续约中'; break
          case 5: statusTxt = '退租中'; break
        }
        return statusTxt
      },
      month2year (months) {
        let periodDate = 0
        if (months >= 0 && months < 12) {
          periodDate = months + '个月'
        } else {
          periodDate = (months / 12).toFixed(0) + '年' + (months % 12 === 0 ? '' : (months % 12) + '个月')
        }
        return periodDate
      }
    }
  }
</script>
<style lang="less" scoped>
  .contract-item {
    margin-bottom: 6px;
    padding: 10px 15px;
    line-height: 1.8;
    background: #fff;
    dt {
      font-size: 15px;
      color: #000;
      .status {
        float: right;
        font-size: 13px;
        color: #097dde;
      }
    }
    dd {
      font-size: 13px;
      color: #666;
    }
  }
</style>
